<template>
  <div class="maker-box">
    <div class="maker-box-preview">
      <div class="phone-imitate">
        <div class="phone-imitate-view"
          :style="{ left: `${(index - pageIndex + 1) * 100}%`, 'background-color': getRandomWarmColor(), transition: `${transition}s` }"
          v-for="(item, index) in pageSize" :key="index">
          <Yy class="people" :code="index%4"></Yy>
          <div class="text">事实上事实上所所所所所所</div>
        </div>
        <Bg1></Bg1>
        <div class="flash"></div>
      </div>
    </div>
    <div class="maker-box-setting"></div>
  </div>
</template>

<script>
// @ is an alias to /src

import Cc from '@/components/people/Cc.vue';
import Yy from '@/components/people/Yy.vue';
import Bg1 from '@/components/bg/Bg1.vue';
export default {
  name: 'Maker',
  components: {
    Cc, Yy, Bg1
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      transition: 5
    }
  },
  mounted() {
    let pageIndex = 1;
    let direction = 1;
    setInterval(() => {
      this.changePage(pageIndex);
      if (1 >= this.pageSize) return;
      if (pageIndex === 1) direction = 1;
      if (pageIndex === this.pageSize) direction = 0;
      if (direction) {
        ++pageIndex;
      } else {
        --pageIndex;
      }

    }, this.transition * 1000 + 500);
  },

  methods: {
    changePage(val) {
      this.pageIndex = val;
    },
    getRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    getRandomBrightColor() {
      const minLightness = 0.5; // 设置为0.5确保颜色始终是亮的。你可以根据需要调整这个值。  
      const maxLightness = 1;
      const hue = Math.random();
      const saturation = Math.random() * 0.5 + 0.5; // 使饱和度在0.5到1之间，以确保颜色鲜艳。  
      const lightness = Math.random() * (maxLightness - minLightness) + minLightness;
      return `hsl(${hue * 360}, ${saturation * 100}%, ${lightness * 100}%)`;
    },
    getRandomWarmColor() {
      const minHue = 0; // 最红的颜色  
      const maxHue = 60; // 最黄的颜色  
      const saturation = Math.random() * 0.5 + 0.5; // 使饱和度在0.5到1之间，以确保颜色鲜艳。  
      const lightness = Math.random() * 0.5 + 0.5; // 使亮度在0.5到1之间，以确保颜色是亮的。  
      const hue = Math.random() * (maxHue - minHue) + minHue;

      return `hsl(${hue}, ${saturation * 100}%, ${lightness * 100}%)`;
    }
  }
}
</script>
<style scoped lang="less">
.maker-box {
  position: relative;

  height: 100%;

  &-preview {
    float: left;
    width: 400px;
    height: 100%;
    border-right: 20px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;

    .phone-imitate {
      position: relative;
      width: 80%;
      height: 80%;
      overflow: hidden;
      background-color: #fff;

      &-view {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        .people{
          position: absolute;
          bottom:30%;
          left:15%;
          width:30%;
          height:40%;
        }
        .text{
          position: absolute;
          top:30%;
          left:15%;
          right:5%;
          font-size:24px;
          font-weight:bold;
          color:rgb(245, 221, 10);
          text-align: right;
        }

      }
    }

  }

  &-setting {
    overflow: hidden;
    height: 100%;
  }

  .flash {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: -100%;
    width: 100px;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, 0.5)50%, rgba(255, 255, 255, 0)100%);
    transform: skewX(-30deg);
    animation: flashs 3s infinite;
  }

}

@keyframes flashs {

0% {
  left: -100%;
}

100% {
  left: 300%;
}
}
</style>
